import { Breadcrumb, Layout, Card } from "antd";
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router";
import { Link } from "react-router-dom";
import ContentRoutes from "../../../route/ContentRoutes";
import HeaderInfo from "./HeaderInfo";
import SiderLayout from "./SliderLayout";
import "./style.css";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";

export default function HomePage() {
  // useUpdate(scrollTop)

  const [collapsed, setCollapsed] = useState(false);

  useEffect(() => {
    const elemet = document.getElementById("root");
    if (elemet !== null && typeof elemet !== "undefined")
      elemet.scrollIntoView({
        block: "start",
        inline: "nearest",
        behavior: "smooth",
      });
  });

  const history = useHistory();

  const pathSnippets = history.location.pathname.split("/").filter((i) => i);

  const breadcrumbNameMap: any = {
    "/homepage": "主页",
    "/homepage/entranceManage": "人员管理", //原学生管理
    "/homepage/entranceManage/registerApproval": "注册审核",
    "/homepage/entranceManage/entranceApproval": "门禁审核",
    "/homepage/systemManage": "系统设置",
    "/homepage/systemManage/deptManage": "组织管理",
    "/homepage/systemManage/devManage": "设备分配",
    "/homepage/entranceManage/studentaccessManage": "人员门禁管理", //原学生门禁管理
    "/homepage/entranceManage/studentinformationManage": "人员信息管理", //原学生信息管理
    "/homepage/systemManage/schoolManage": "学校管理",
    "/homepage/systemManage/personManage": "工号管理",
    "/homepage/entranceManage/accessRecord": "进出记录",
    "/homepage/systemManage/equipment": "设备管理",
    "/homepage/systemManage/addressmanage": "地址管理",
    "/homepage/systemManage/staffBatchManage": "员工管理",
    "/homepage/workPlatForm": "工作台",
    "/homepage/workPlatForm/todoList": "待处理",
    "/homepage/workPlatForm/doneList": "已处理",
    "/homepage/addresslist/importsuccess": "导入成功",
    "/homepage/dataAnalysis": "数据分析/统计",
    "/homepage/dataAnalysis/schoolAnalysis": "在校情况分析",
    "/homepage/dataAnalysis/dormAnalysis": "在寝情况分析",
    "/homepage/dataAnalysis/videoAttendance": "视频考勤统计",
    "/homepage/systemManage/equipmentManipulate": "设备操作",
    "/homepage/systemManage/schooldetail": "校园周报",
    "/homepage/systemManage/campusmanage": "校区管理",
    "/homepage/systemManage/ruleManage": "规则管理",
    "/homepage/systemManage/lightUpSchool": "点亮学校",
    "/homepage/systemManage/bulkImport": "学生门禁权限批量开通",
    "/homepage/entranceManage/record": "访客记录管理",
    "/homepage/entranceManage/leaves": "请假记录管理",
    "/homepage/systemManage/studentsOperations": "学生证运维管理",
    "/homepage/interactManage/achievement": "学生成绩管理",
    "/homepage/interactManage/achievementIssue": "学生成绩发布",
    "/homepage/interactManage/releaseInformation": " 信息发布",
    "/homepage/interactManage/releaseInformationAudit": "学生信息发布审核",
    "/homepage/entranceManage/curriculum": "智能学生证免打扰",
    "/homepage/entranceManage/curriculumStudent": "智能学生证免打扰人员",
    "/homepage/epidemicsituation": "疫情防控",
    "/homepage/epidemicsituation/personnel": "人员统计",
    "/homepage/epidemicsituation/visitor": "访客记录",
    "/homepage/epidemicsituation/abnormal": "异常人员",
    // "/homepage/attManage/share": "文档管理"
    "/homepage/terminal": "终端管理",
    "/homepage/terminal/equipment": "门禁设备管理",
    "/homepage/terminal/videoterminal": "视频设备管理",
    "/homepage/terminal/scanterminal": "扫码设备管理",
    "/homepage/videoSurveillance/videoSurveillance": "视频监控管理",
    "/homepage/entranceManage/visitorSreview": "访客审核记录管理",
    "/homepage/systemManage/StudentCardEenew": "学生证批量换新",

    // "/homepage/attManage/share": "文档管理"
  };

  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join("/")}`;
    return (
      <Breadcrumb.Item key={url}>
        {index === 1 ? (
          breadcrumbNameMap[url]
        ) : (
          <Link to={url === "/homepage" ? "/home/index" : url}>
            {breadcrumbNameMap[url]}
          </Link>
        )}
      </Breadcrumb.Item>
    );
  });

  function onCollpased(value: boolean) {
    setCollapsed(value);
  }

  return (
    <Layout>
      <Layout.Sider
        collapsed={collapsed}
        className="sider-menu"
        breakpoint={"lg"}
        width="calc(200px + 3%)"
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="ant-pro-sider-menu-logo">
          <Link to="/home/index">
            {/*<img alt="logo" src={require("../../../images/logo new3.png")} />*/}
            <h1
              style={
                collapsed
                  ? {
                      visibility: "hidden",
                      whiteSpace: "nowrap",
                      overflow: "hidden",
                    }
                  : {
                      fontWeight: 900,
                      whiteSpace: "nowrap",
                      overflow: "hidden",
                    }
              }
            >
              校园翼卡通
            </h1>
          </Link>
        </div>
        <SiderLayout />
      </Layout.Sider>
      <Layout
        className={collapsed ? "layout-content-collpased" : "layout-content"}
      >
        <Layout.Header className="my-header">
          {collapsed ? (
            <MenuUnfoldOutlined
              onClick={(e) => onCollpased(false)}
              style={{
                fontSize: "24px",
                lineHeight: "64px",
                transition: ".3s linear",
                cursor: "pointer",
              }}
            />
          ) : (
            <MenuFoldOutlined
              onClick={(e) => onCollpased(true)}
              style={{
                fontSize: "24px",
                lineHeight: "64px",
                transition: ".3s linear",
                cursor: "pointer",
              }}
            />
          )}

          <HeaderInfo />
        </Layout.Header>
        <Layout.Content style={{ minHeight: "calc(100vh - 64px)" }}>
          {history.location.pathname === "/homepage" ? null : (
            <Card className="ant-pro-page-header-wrap-page-header-warp">
              <div className="ant-pro-grid-content">
                <div className="ant-page-header has-breadcrumb ant-page-header-ghost">
                  <Breadcrumb separator=">">{extraBreadcrumbItems}</Breadcrumb>
                  <div className="ant-page-header-heading">
                    <span className="ant-page-header-heading-title">
                      {breadcrumbNameMap[history.location.pathname]}
                    </span>
                  </div>
                </div>
              </div>
            </Card>
          )}
          <ContentRoutes />
        </Layout.Content>
      </Layout>
    </Layout>
  );
}
